Ext.define('FirstMate.view.Stations', {
	requires: ['FirstMate.store.Tides'],
	extend: 'Ext.dataview.List',
	alias: 'widget.stationsview',
	id : 'stationsView',
	config: {
		//width : Ext.os.deviceType == 'Phone'? null : 600,
		pack : 'center',
		align: 'center',
		grouped: true,
		indexBar: true,
    	loadingText : 'Loading tides data near the location marker',
    	itemTpl: new Ext.XTemplate(
    	         '<div>{[this.display(values.waterLevel, values.type, values.time)]}</div>', 
    	         {
    	             compiled: true,
    	             display : function (waterLevel, type, time) {
    	            	     	            	 
    	            	 var formattedHeight = FirstMate.app.tideUnits == 'm'? Math.round(waterLevel * 10)/10 : Math.round(waterLevel * 328.08399)/100; 
    	            	 var formattedTime = ('00' + (time.getMonth() + 1)).slice(-2) 
    	            	 + '/'
    	            	 + ('00' + time.getDate()).slice(-2)
    	            	 + '/'
    	            	 + time.getFullYear()
    	            	 + ' '
    	            	 + ('00' + time.getHours()).slice(-2)
    	            	 + ':'
    	            	 + ('00' + time.getMinutes()).slice(-2);
    	            	 var img = ( type === 'H' ) ? '<img src="app/resources/icons/up.png"/>' : '<img src="app/resources/icons/down.png"/>';
    	            	 var color = (waterLevel > 0)? 'blue':'red';
    	            		    	            		 
    	            	 return formattedTime 
    	            	 + '&nbsp&nbsp&nbsp' 
    	            	 +  img
    	            	 + '&nbsp&nbsp&nbsp'
    	            	 + '<span style="color:' + color + '"> ' + formattedHeight + '</span>'
    	            	 + '&nbsp'
    	            	 + FirstMate.app.tideUnits;
    	            	
    	             }
    	}),
    	store: 'tidesStore'
//    	listeners : {
//    		itemtap : function () { 	
//            	Ext.getCmp('mainView').setActiveItem(0);
//            }
//    	}

	}
});